<script lang='ts' setup>
import {reactive, ref} from 'vue'
import {studentPay} from "@/api/student";
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
let route = useRoute()
import {ElMessage} from "element-plus";
import {useFile} from "@/hooks/web/useFile";

const {handlePreview, showViewer, srcList, action, headers} = useFile()
console.log('action', action);
const emit = defineEmits(['handleFileSuccess', 'handleFileRemove', 'submitPayment'])
let tableHeader = ref([
  {
    label: '缴费项目', prop: 'name', width: '120px', type: 'select', options: [
      { label: '硕士学费1', value: '硕士学费1' },
      { label: '硕士学费2', value: '硕士学费2' },
      { label: '博士学费1', value: '博士学费1' },
      { label: '博士学费2', value: '博士学费2' },
      { label: '博士学费3', value: '博士学费3' },
      { label: '博士学费4', value: '博士学费4' },
      { label: '延期学费', value: '延期学费' },
      { label: '签证费支出', value: '签证费支出' }
    ], require: false
  },
  {
    label: '缴费状态', prop: 'pay_status', width: '110px', type: 'select', options: [
      {label: '未缴纳', value: '0'},
      {label: '已缴纳', value: '1'},
      {label: '减免', value: '2'},
      {label: '退费', value: '3'}
    ], require: false
  },
  {
    label: '支付方式', prop: 'pay_method', width: '120px', type: 'select', options: [
      {label: '无', value: '0'},
      {label: '工行对公', value: '1'},
      {label: '微信支付', value: '2'},
      {label: '支付宝', value: '3'},
      {label: '学校账户', value: '4'}
    ], require: false
  },
  {label: '缴费金额', prop: 'money', type: 'text', width: '110px', require: false},
  {label: '支付日期', prop: 'pay_date', width: '150px', type: 'date', require: false},
  {label: '附件', prop: 'fileList', width: '130px', type: 'file', require: false},
  {label: '备注', width: '150px', prop: 'remark', type: 'text', require: false},
  {label: '审批状态', prop: 'confirm_txt', width: '100px'},
  {label: '审批说明', prop: 'confirm_remark'}
])
const tableData = reactive([])
defineExpose({tableData})

const handlePush = (type, index, row) => {
  if (type === 'pop') {
    if (row.confirm == 1 || row.confirm === '0') {
      return ElMessage({message: '审核已通过以及审批中的缴费信息不可移除', type: 'warning'})
    }
    tableData.splice(index, 1)
  } else {
    tableData.push({
      name: '',
      pay_status: '',
      pay_method: '',
      pay_date: '',
      confirm: '',
      remark: '',
      money: '', //缴费金额
      showForm: true,
      fileList: []
    })
  }
}
let subLoading = ref(false)
//移除文件触发

const handleRemove = (file, fileList, index) => {
  tableData[index].fileList = fileList
}

const handleSuccess = (response, file, fileList, index) => {
  if (response.code === 0) {
    tableData[index].fileList.push({url: response.data.path, name: file.name})
  }
}

const handleSubmit = async () => {
  let data = {
    student_id: route.query.student_id,
    list: tableData
  }
  subLoading.value = true
  let res = await studentPay(data)
  subLoading.value = false
  console.log(res)
  if (res) {
    ElMessage({type: 'success', message: '提交成功'})
    emit('submitPayment')
  }
}


const handleClick = (item, index) => {
  if(item.confirm == 1) return
  console.log(tableData[index]);
  tableData[index].confirm = 0
}

const handleBack = () => {
  router.back()
}

</script>

<template>
  <el-row justify="center" style="padding-bottom: 100px;">
    <el-col :lg="22" :xl="19" :xs="24" :md="24" :sm="24" class="box-wrap">
      <el-row style="justify-content: space-between;">
        <el-col :span="24">
          <div class="student-label">缴费信息</div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column v-for="(item, index) in tableHeader" :prop="item.prop" :label="item.label"
                             :width="item.width" :key="index">
              <template #default="scope">
                <template v-if="!scope.row.confirm">
                  <el-input v-if="item.type === 'text'" v-model="scope.row[item.prop]"></el-input>
                  <el-select v-else-if="item.type === 'select' && scope.row[item.prop] !=='报名费' && scope.row[item.prop] !=='前置学费'" v-model="scope.row[item.prop]" clearable>
                    <el-option v-for="item1 in item.options" :key="item1.value" :label="item1.label"
                               :value="item1.value">
                    </el-option>
                  </el-select>
                  <el-date-picker style="width: 100%"
                                  v-else-if="item.type === 'date'"
                                  v-model="scope.row[item.prop]"
                                  format="YYYY-MM-DD"
                                  value-format="YYYY-MM-DD"
                                  type="date"
                                  placeholder="支付日期"/>
                  <el-upload
                      :action="action"
                      :headers="headers"
                      ref="upload"
                      :on-preview="handlePreview"
                      :on-remove="(file,fileList)=>handleRemove(file,fileList,scope.$index)"
                      :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, scope.$index)"
                      v-else-if="item.type ==='file'"
                      :file-list="scope.row[item.prop]"
                  >
                    <el-button size="small" slot="trigger" style="margin-left: 15px" plain type="primary">选取文件
                    </el-button>
                  </el-upload>
                  <span v-else style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap"
                        :title="scope.row[item.prop]">{{ scope.row[item.prop] }}</span>
                </template>
                <template v-else>
                  <div v-if="item.prop==='pay_status' || item.prop==='pay_method'" @click="handleClick(scope.row, scope.$index)"
                    :class="{'edit':scope.row.confirm !=='1'}"
                  >
                    {{ item.options[scope.row[item.prop]] ? item.options[scope.row[item.prop]].label : '暂无' }}
                  </div>
                  <div
                      v-else-if="item.type==='file'"
                      style="color: #409EFF;cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                    <p v-for="item1 in scope.row.fileList" @click="handlePreview(item1)"
                       style="color: #409EFF;cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap"
                    >{{ item1.name }}</p>
                  </div>
                  <div v-else style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap"
                       @click="handleClick(scope.row, scope.$index)"
                       :class="{'edit':scope.row.confirm !=='1'}"
                       :title="scope.row[item.prop]">
                    {{ scope.row[item.prop] }}
                  </div>
                </template>
              </template>
            </el-table-column>
            <el-table-column #default="scope" label="操作" width="100px">
              <el-button link type="primary" icon="plus" @click="handlePush('','')"></el-button>
              {{ scope.index }}
              <el-button v-show="scope.$index >=2" link type="primary" icon="Minus"
                         @click="handlePush('pop',scope.$index,scope.row)"></el-button>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :lg="24" style="margin-top: 30px;display: flex;justify-content: center">
          <el-button type="primary"  plain @click="handleSubmit" :loading="subLoading">提交缴费信息</el-button>
          <el-button @click="handleBack">返回</el-button>
        </el-col>
      </el-row>
    </el-col>
    <el-image-viewer
        v-if="showViewer"
        :z-index="9999"
        @close="()=>{showViewer  =false}"
        :url-list="srcList"
    />
  </el-row>
</template>
<style scoped lang="less">
.edit{
  color:#409EFF;
  cursor: pointer;
}
@import "../index";
</style>